<template>
  <div id="map">
  </div>
</template>

<script>
import Echarts from "echarts";
import china from '../assets/china.json'
import sourse from '../assets/api.json'
import axios from 'axios'

export default {
  name: "Forecast",
  data() {
    return {
      show:false,
      fileList: [],
      charts: "",
      data: {
        charts:null,
        sourseData:[],
        dataList:[],
      },
      defaultProps: {
      }
    };
  },
  methods: {
    async downLoadData(){
      var self = this
      var url = 'https://www.tianqiapi.com/api?version=epidemic&appid=23035354&appsecret=8YvlPNrz'
      await axios.get(url,{       // 还可以直接把参数拼接在url后边
        params:{
            title:''
        }
    }).then(function(res){
      self.dataList = res.data
      // console.log(self.dataList)
    }).catch(function (error) {
        console.log(error);
    });
    },
    initSourseData(){
      var sourseData = [];
      var self = this 
      console.log(self.dataList.data.list)
      var sum = 0
      for(var i = 0;i<self.dataList.data.list.length;i++){
        var str = self.dataList.data.list[i]
        var strList = str.split(' ')
        sum +=parseInt(strList[2])
        var strData = ''
        for(var j = 1;j<strList.length;j++){
          strData+=strList[j]
        }
        sourseData.push({
          name:strList[0],
          data :strData,
          // cure:strList[4],
          // dead:strList[6]
        })
      }
      console.log(sum)
      return sourseData
    },
    initMapData(mapJson){
  
    var self = this
    var mapData = []
    for( var i=0;i<mapJson.features.length;i++ ){
        mapData.push({
            name:mapJson.features[i].properties.name,
            id:mapJson.features[i].properties.adcode,
            data:Math.random(10),
        })
    }
    return mapData
    },
    getLineChart() {
      var self= this
      self.sourseData = self.initSourseData(sourse);
      
      var option = {
        title:{
          text:self.dataList.data.date,
          show:true,
          left:'center',
          textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: 'Arial, Verdana, sans...',
                fontSize: 500,
                fontStyle: 'normal',
                fontWeight: 'bolder',
            },
          },
         backgroundColor: "#02AFDB",
          tooltip: {
            trigger:'item',
            formatter: function(params) {
              var text = ''
              for(var i=0;i<self.sourseData.length;i++){
                // console.log(self.sourseData[i].name+"省"+" "+params.name)
                if(self.sourseData[i].name+"特别行政区"==params.name||self.sourseData[i].name+"市"==params.name||self.sourseData[i].name+"省"==params.name||self.sourseData[i].name==params.name||self.sourseData[i].name+"自治区"==params.name||self.sourseData[i].name+"回族自治区"==params.name||self.sourseData[i].name+"壮族自治区"==params.name||self.sourseData[i].name+"维吾尔自治区"==params.name){
                  text+=params.name+'<br/>'+self.sourseData[i].data
                  // +'<br/>治愈：'+self.sourseData[i].cure+"<br/>死亡："+self.sourseData[i].dead
                }
              }
              return text
            }
          }, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)',
                // color:function(params){
                //可以在这里添加对应的数据对每个省市的色块进行颜色的递进展示
                // }
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: this.initMapData(china)
            }
          ]

      };
      this.charts.setOption(option);
    },
    
  },
  mounted() {
    this.downLoadData().then(result=>{
    Echarts.registerMap('china', china);
    var chinaMap = Echarts.init(document.getElementById("map"));
    this.charts = chinaMap;
    this.getLineChart();
    })
  },
  components: {}
};
</script>
<style scoped>
#map{
  height: 1000px;
}
</style>